<template>
  <view class="wrapper">
    <NavbarModule title=" " :leftType="1" @showBubbleBox="showBubbleBox" />
    <!-- <scroll-view :scroll-y="true" class="user-content"
			:style="'height: calc(' + WindowInfo.windowHeight + 'px - 120rpx)'"> -->
    <!-- 用户头像、名称、手机号 -->
    <view class="user-head__container">
      <image
        v-if="isPeopleAvatarExit(userInfo.avatarCompress || userInfo.avatar)"
        :src="userInfo.avatarCompress || userInfo.avatar"
        mode="aspectFill"
        class="user-head__container__avatar"
        @click="showPreview(userInfo.avatar)"
      ></image>
      <view v-else class="user-head__container__avatar avator-font-setting" :style="{ background: `${userInfo.defaultColor}` }">
        {{ (formatUserName(userInfo) || '').slice(0, 1) }}
      </view>
      <view class="user-head__container__name">
        {{ userInfo.newUserName }}
      </view>
      <view class="user-head__container__phone" v-if="userInfo.userPhone">+{{ userInfo.internationalAreaCode }} {{ userInfo.userPhone }}</view>
      <view class="user-head__container__phone user-email-ellipsis" v-if="userInfo.email">
        {{ userInfo.email }}
      </view>
      <view class="user-head__container__phone" v-if="userInfo.encoding">
        {{ userInfo.encoding }}
      </view>
    </view>
    <view class="user-container">
      <view class="user-container__item" v-for="item in menuListTop" :key="item.type" @click="navigationHandle(item)">
        <view
          class="iconfont cell-icon dating-icon"
          :class="item.icon"
          :style="item.size ? `background: ${item.color}; font-size: ${item.size}` : `background: ${item.color}`"
        ></view>
        <view class="cell-text">{{ item.title }}</view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view>
    </view>
    <view class="user-container user-container-bottom">
      <view class="user-container__item" v-for="item in menuListBottom" :key="item.type" @click="navigationHandle(item)">
        <view
          class="iconfont cell-icon dating-icon"
          :class="item.icon"
          :style="item.size ? `background: ${item.color}; font-size: ${item.size}` : `background: ${item.color}`"
        ></view>
        <view class="cell-text">{{ item.title }}</view>
        <view class="cell-language" v-if="item.type == 'Language'">
          {{ localesValue }}
        </view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view>
    </view>
    <!-- </scroll-view> -->
    <SelectPopup
      :show.sync="SelectPopupShow"
      :option="locales"
      :title="$t('user.language')"
      :value="applicationLocale"
      @finish="onChangeLocal"
      v-if="SelectPopupShow"
      labelSigned="text"
      valueSigned="code"
    ></SelectPopup>
    <BubbleBox v-if="bubbleBoxVisiable">
      <view class="menu-box">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
          {{ item.label }}
        </view>
      </view>
    </BubbleBox>
  </view>
</template>

<script>
import NavbarModule from '@/components/NavbarModule.vue';
import BubbleBox from '@/components/BubbleBox.vue';
import { queryChangeip } from '@/services/login';
import { mapActions, mapState } from 'vuex';
import { queryUserInfo } from '@/services/user';

import ChangeLanModule from '../../components/ChangeLanModule.vue';
import SelectPopup from '@/components/SelectPopup.vue';
import { changeLang } from '@/utils/olImInterface.js';

export default {
  name: 'User',
  data() {
    return {
      SelectPopupShow: false,
      bubbleBoxVisiable: false,
      WindowInfo: ''
    };
  },
  computed: {
    ...mapState(['userInfo', 'token']),
    menuListTop() {
      return [
        // 钱包
        {
          type: 'Wallet',
          title: this.$t('user.wallet'),
          icon: 'icon-qianbao',
          color: '#795EDD'
        },
        // 我发布的
        {
          type: 'Posted',
          title: this.$t('user.Posted'),
          icon: 'icon-qianyuejilu',
          color: '#BE75C1',
          size: '36rpx'
        },
        // 交易订单
        {
          type: 'TradeOrders',
          title: this.$t('user.Trade-Orders'),
          icon: 'icon-dingdan',
          color: '#F5A527',
          size: '38rpx'
        },
        // 收藏
        {
          type: 'Favorites',
          title: this.$t('user.Favorites'),
          icon: 'icon-xihuan',
          color: '#6BD894'
        }
      ];
    },
    menuListBottom() {
      return [
        {
          type: 'Settings',
          title: this.$t('user.Settings'),
          icon: 'icon-shezhi',
          color: '#6AB2E5'
        },
        {
          type: 'Language',
          title: this.$t('user.language'),
          icon: 'icon-net-fill',
          color: '#F5A527',
          size: '38rpx'
        },
        {
          type: 'Privacy and Security',
          title: this.$t('user.Privacy-and-Security'),
          icon: 'icon-mima',
          color: '#F1513C'
        },
        {
          type: 'About Omlook',
          title: this.$t('user.About-Omlook'),
          icon: 'icon-guanyu',
          color: '#61BDB2'
        }
      ];
    },
    menuList() {
      return [
        {
          label: this.$t('discover.Dating'), // 约会
          url: `/pagesDiscover/friendsInformation/EditData${!!this.$store.state.friendsInformation?.userPersonalsId ? '?formData=1' : ''}`,
          type: 0,
          typeName: 'Dating'
        },
        {
          label: this.$t('discover.Offer-a-reward'),
          url: '/pagesDiscover/reward/RewardRelease',
          type: 2,
          typeName: 'Reward'
        },
        {
          label: this.$t('user.Trading-Center'),
          url: '/pagesUser/bourse/release',
          type: 2,
          typeName: 'Transaction'
        },
        {
          label: this.$t('discover.Recruitment'), // 招聘
          url: '/pagesDiscover/recruitment/RecruitmentRelease',
          type: 2,
          typeName: 'Recruitment'
        },
        {
          label: this.$t('discover.information'),
          url: '/pagesDiscover/information/InfoRelease',
          type: 2,
          typeName: 'Recruitment'
        }
      ];
    }
  },
  components: {
    ChangeLanModule,
    SelectPopup,
    BubbleBox,
    NavbarModule
  },
  methods: {
    ...mapActions(['changeUserInfo']),
    menuClick(item) {
      // if (item.typeName === "Dating") {
      //   if (!this.$store.state.friendsInformation.userPersonalsId) {
      // 		this.gotoPage('/pagesDiscover/friendsInformation/EditData')
      // 	} else {
      // 		this.gotoPage('/pagesDiscover/friendsInformation/FriendsInformation')
      // 	}
      //   return
      // }
      if (this.token) {
        this.gotoPage(item.url, item.type);
      } else {
        uni.navigateTo({
          url: '/pages/login/Login'
        });
      }
    },
    gotoPage(url, type) {
      if (type == 1) {
        uni.switchTab({
          url
        });
        return;
      }
      uni.navigateTo({
        url
      });
    },
    showPreview(url) {
      uni.previewImage({
        urls: [url]
      });
    },
    // 气泡框显隐
    showBubbleBox() {
      this.bubbleBoxVisiable = !this.bubbleBoxVisiable;
    },
    handleToSearch() {
      uni.navigateTo({
        url: '/pagesTool/search/Search'
      });
    },
    navigationHandle(item) {
      switch (item.type) {
        case 'Wallet':
          queryChangeip().then((res) => {
            uni.navigateTo({
              url: '/pagesUser/wallet/Wallet'
            });
            console.log(res);
            if (res.result.data === '中国') {
              uni.showToast({
                title: this.$t('newDeal.msg'),
                icon: 'none'
              });
            } else {
              uni.navigateTo({
                url: '/pagesUser/wallet/Wallet'
              });
            }
          });

          break;
        case 'Favorites':
          uni.navigateTo({
            url: '/pagesUser/favorites/Favorites'
          });
          break;
        case 'Settings':
          uni.navigateTo({
            url: '/pagesUser/setting/Setting'
          });
          break;
        case 'Privacy and Security':
          uni.navigateTo({
            url: '/pagesUser/privacy/Privacy'
          });
          break;
        case 'About Omlook':
          uni.navigateTo({
            url: '/pages/user/AboutUs'
          });
          break;
        case 'Posted':
          uni.navigateTo({
            url: '/pagesUser/posted/Posted'
          });
          break;
        case 'Language':
          this.SelectPopupShow = true;
          break;
        case 'TradeOrders':
          uni.navigateTo({
            url: '/pagesUser/bourse/order?tradeScene=1'
          });
          break;
        default:
          break;
      }
    },
    //获取用户信息
    async handleUserInfo() {
      const resp = await queryUserInfo();
      if (!resp.success) return;
      resp.result.data.newUserName = this.formatUserName(resp.result.data);
      this.changeUserInfo(resp.result.data);
    },
    // 切换语言
    onChangeLocal(value) {
      this.onLocaleChange(value);
      changeLang();
      console.log('语言切换为', value);
    }
  },
  onShow() {
    this.WindowInfo = uni.getWindowInfo();
    this.handleUserInfo();
    this.bubbleBoxVisiable = false;
    console.log(this.userInfo, this.menuListTop);
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  box-sizing: border-box;
  padding: 0 30rpx 30rpx;
  width: 100%;
  background: #f6f6f6;

  // .user-content {
  // 	// height: calc(100vh - calc(var(--status-bar-height) + 60rpx) - 320rpx);
  // 	overflow: auto;
  // }

  // 邮箱过长显示省略号
  .user-email-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
  }

  .user-head {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .icon-sousuo {
      margin-right: 50rpx;
    }

    .head-icon {
      color: #61bdb2;
      font-size: 30rpx;
    }

    & > .head-icon:last-child {
      margin-right: 10rpx;
    }

    &__left,
    &__right {
      // width: 100%;
      // box-sizing: border-box;
      // flex: 0 0 110rpx;
    }

    &__right {
      display: flex;
      justify-content: space-between;
    }

    &__container {
      // width: 100%;
      // box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // margin-left: 92rpx;
      margin-top: 65rpx;
      font-family: Source Han Sans CN;

      &__avatar {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        text-align: center;
        line-height: 150rpx;
        font-size: 34upx;
        font-weight: bold;
        color: #ffffff;
        // flex-shrink: 0;
      }

      &__name {
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
        margin-top: 26rpx;
      }

      &__phone {
        font-size: 28rpx;
        font-weight: 400;
        color: #878787;
        margin-top: 25rpx;
        text-align: center;
      }
    }
  }

  .user-container {
    margin-top: 70rpx;
    // position: relative;
    // top: 70rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;

    &__item {
      display: flex;
      align-items: center;
      height: 112rpx;
      border-bottom: 2rpx solid #f6f6f6;

      .cell-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rpx;
        height: 60rpx;
        font-size: 46rpx;
        border-radius: 50%;
        color: #fff;
      }

      .icon-qianyuejilu {
        padding-left: 6rpx;
        box-sizing: border-box;
      }

      .icon-mima {
        padding-bottom: 4rpx;
        box-sizing: border-box;
      }

      .cell-text {
        flex: 1;
        margin-left: 30upx;
        font-size: 30upx;
        font-weight: 400;
        color: #000000;
      }

      .cell-language {
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #878787;
        margin-right: 32rpx;
      }

      .arrow-icon {
        color: #a6a6a6;
        font-size: 30upx;
      }
    }
  }

  .user-container-bottom {
    margin-top: 40rpx;
  }
}

.menu-box {
  padding: 0 30rpx;

  .menu-item {
    height: 80rpx;
    background: #0d1918;
    box-shadow: inset 0px -2rpx 0px 0px rgba(255, 255, 255, 0.05);
    line-height: 80rpx;
    font-size: 28rpx;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}
</style>